<template>
	<view>
		
		<view class="cu-card dynamic isCard" >
			<!--<view class="hots_title">
			  <view>
			    {{comment_title}}
			    <text class="iconfont iconhot1"></text>
			  </view>
			</view>-->
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar comment " v-for="(comment, index) in commentData" :key="index">
					<view class="cu-item">
						<!--头像开始-->
						<view v-if="comment.user.avatarurl" class="cu-avatar round" 
						:style="{'background-image':'url(' + comment.user.avatarurl + ')'}" lazy-load></view>
						<!--头像结束-->
						<view class="content">
							
							<!--用户名开始-->
							<view class="text-grey">{{comment.user.nickname}}</view>
							<!--用户名结束-->
							<!--评论开始-->
							<view class="text-gray text-content text-df">
								{{comment.content}}
							</view>
							<!--评论结束-->
							<!--回复开始-->
							<user-reply v-if="comment.commentsReplyList.length > 0" :digest="comment.commentsReplyList"></user-reply>
                             <!--回复结束-->
							<view class="margin-top-sm flex justify-between">
								<!--评论时间开始-->
								<view class="text-gray text-df">{{comment.cnTime||''}}</view>
								<!--评论时间结束-->
								<!--回复触发控件开始-->
								<view class="text-gray text-content text-df"  @tap="comment(comment.user.nickname,comment.id)">
	                                <text >{{replyText}}</text>
                                     <text class="cuIcon-messagefill margin-lr-xs " style="font-size: 30upx;" ></text> 
									
								</view>
								<!--回复触发控件结束-->
							</view>
						</view>
					</view>


					
					
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		
		<view  >
			<!--评论框开始 -->
			<view v-show="showInput" class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			
				<input class="solid-bottom" :adjust-position="false"  maxlength="300" cursor-spacing="10"
				  :value="dataComment" @input="commentChange" @focus="InputFocus" @blur="InputBlur" :placeholder="comment_placeholder"></input>
				<button class="cu-btn bg-green shadow" @tap="clickComent()">发送</button>
			</view>
			<!-- 评论框结束-->
			<!--回复框开始 -->
			<view v-show="!showInput" class="cu-bar foot input" > 
				<input class="solid-bottom"   maxlength="300" cursor-spacing="10"
				:value="dataReply" @input="replyChange"  :focus="replayFocus" @blur="InputReplyBlur" 
				:placeholder="'回复:'+input_placeholder"></input>
				<button class="cu-btn bg-green shadow" @tap="clickReply()">发送</button>
			</view>
			<!--回复框结束 -->
		</view>



	</view>
</template>

<script>
	import chatInput from '../../../component/chatInput.vue'; //input框
	import userReply from './reply.vue';
	import moment from "moment";
moment.locale("zh-cn");
	export default {
		props:{
			title:String,	
			myId:Number
		},
		components: {
			chatInput,
			userReply
		},
		data() {
			return {				
				comment_title:'',
				//index: '',
				replyText:"回复",
				comment_placeholder:"发表你的评论",
				comment_index: '',
				replyId:0,//所回复的评论ID
				input_placeholder: null, //占位内容	
				//is_reply: false, //回复还是评论
				showInput: true, //评论输入框 false:回复别人,true:评论课程
				//platform: '',
				replayFocus:false,
				InputBottom: 0,
				dataComment:null,
				dataReply:null,
				commentData:[],
				params: { //获取更多的参数
				  limit: 10,
				  skip: 0
				},						
			};
		},

		
		onLoad: function (options) {
	//	var data = JSON.stringify(options.title); 
		   // var str = options.title;
		 	//console.log(data)
			this.comment_title=options.title;	
		},
		mounted(){		
			this.getComment();
		},
		methods: {
			getComment(){
					this.request({
						url: this.apiServer + '/comments/findActivitiesCommentsByPId?limit='
						+this.params.limit+'&skip='+this.params.skip+'&pId='+this.myId 
					}).then(res => {
						//时间
						res.data.forEach(
         				 v => {
							  v.cnTime = moment(v.createTime).format('YYYY-MM-DD HH:mm:ss');
							  if(v.commentsReplyList.length>0){
								 v.commentsReplyList.forEach(
								 i=>{
									i.cnTime = moment(i.createTime).format('YYYY-MM-DD HH:mm:ss'); 
								 })
								 }
						  }
						   );
						   
						this.commentData = res.data;
					});
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height;
			},
			InputBlur(e) {
				this.InputBottom = 0;
			},
			InputReplyBlur(e) {
				this.input_placeholder=null;
				this.showInput=true;
				this.replayFocus=false;
			},
			comment(name,id) {
				this.showInput = false; //调起input框
                this.replyId=id;//所回复的评论ID
				this.replayFocus=true;
				this.input_placeholder=name;
			},
			replyChange: function (e) {//评论数据改变
				this.dataReply = e.detail.value;
			},
			commentChange: function (e) {//回复数据改变
				this.dataComment= e.detail.value;
			},
			clickComent()
			{
				var userID=uni.getStorageSync("user").id;
				if(this.dataComment!=null)
					{
						this.request({
							url:this.apiServer + '/comments/commentActivitiesByComment',
							method:'POST',
							data:{
								    "PId": this.myId,
									"UId":userID,
								    "content":this.dataComment,
							},				    
							header:{
								"Content-Type": "application/x-www-form-urlencoded"
							},
						}).then(res=>{
						this.input_placeholder=null;
						this.dataComment=null;
						this.getComment();
						if(res.code==0)
						{
							uni.showToast({
								title:"回复成功"
							})
						}
						else{
							uni.showToast({
								title:"回复失败",
							    image:"../../static/icon/error.png"
							})
						}
						})
					}else{
						uni.showToast({
							title:"回复失败",
						    image:"../../static/icon/error.png"
						})
					}
			},
			clickReply()
			{
				var userID=uni.getStorageSync("user").id;
				if(this.dataReply!=null)
					{
						this.request({
							url:this.apiServer + '/comments/commentComByComment',
							method:'POST',
							data:{
								    "PId": this.replyId,
									"UId":userID,
								    "content":this.dataReply,
							},				    
							header:{
								"Content-Type": "application/x-www-form-urlencoded"
							},
						}).then(res=>{
						this.comment_placeholder="发表你的评论";
						this.dataReply=null;
						console.log(this.comment_placeholder);
						this.getComment();
						if(res.code==0)
						{
							uni.showToast({
								title:"评论成功"
							})
						}
						else{
							uni.showToast({
								title:"评论失败",
							    image:"../../static/icon/error.png"
							})
						}
						})
					}else{
						uni.showToast({
							title:"评论失败",
						    image:"../../static/icon/error.png"
						})
					}
			}
			

		}
	}
</script>

<style lang="scss" scoped>
    .hots_title {
      padding: 10rpx;
	  }
     .hots_title>view {
        border-left: solid $color-theme 10rpx;
        padding-left: 10rpx;
        font-size: 36rpx;
        font-weight: 600;
      }
      .iconhot1 {
        padding-left: 5rpx;
        color: red;
        font-size: 30rpx;
      }
    

</style>
